<template>
	<view class="charts-power">
		<uni-card padding="0" spacing="0" margin="6px">
			<uni-list>
				<uni-list-item>
					<template v-slot:body>
						<view class="top">
							<view class="top_left">
								<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
							</view>
							<view class="list_item">

							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view class="bottom">
							<view class="item">
								<view class="item_title">采购合同总数</view>
								<view class="item_number"><text>{{procureContract.count||'--'}}</text></view>
							</view>
							<view class="item">
								<view class="item_title">采购合同总额</view>
								<view class="item_number"><text>{{procureContract.sumPrice||'--'}}</text></view>
							</view>
							<view class="item">
								<view class="item_title">已付款总额</view>
								<view class="item_number"><text>{{procureContract.payPrice||'--'}}</text></view>
							</view>
							<view class="item">
								<view class="item_title">未付款总额</view>
								<view class="item_number"><text>{{procureContract.unpaid||'--'}}</text></view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		data() {
			const date = new Date()
			const year = date.getFullYear()
			return {
				year,
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "0%",
						fontSize: 20,
						color: "#000"
					},
					subtitle: {
						name: "",
						fontSize: 12,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				procureContract: {
					sumPrice: 0, // 采购合同总额
					payPrice: 0, // 采购合同已支付总额
					count: 0, // 采购合同总数
					unpaid: 0 // 采购合同未支付总额
				},
			};
		},
		mounted() {
			this.getServerData();
		},
		methods: {
			async getServerData() {
				let contract = {
					type: 2
				}
				const token = uni.getStorageSync('Token')
				let res = await post(api.ProcureContract, contract)
				this.procureContract.sumPrice = res.data.sumPrice
				this.procureContract.payPrice = res.data.payPrice
				this.procureContract.count = res.data.count
				this.procureContract.unpaid = res.data.unpaid
				let r = 0.0
				if (this.procureContract.payPrice && this.procureContract.sumPrice) {
					r = (this.procureContract.payPrice / this.procureContract.sumPrice).toFixed(2)
				}
				this.powerList = res.data
				let data = {
					series: [{
						color: "#0055ff",
						data: r || 0 // 圆环比例=
					}]
				};
				this.opts.title.name = Math.floor(r * 100) + "%" // 中间数值
				this.chartData = JSON.parse(JSON.stringify(data));
			},
		}
	};
</script>

<style scoped lang="scss">
	@import '../../../static/css/ProjectStatus.css';
</style>